<template>
  <div class="order-page">
  <el-form :inline="true" class="search-form">
  <el-form-item>
  <el-input v-model.trim="searchText" placeholder="请输入订单编号或客户名称" />
  </el-form-item>
  <el-form-item>
  <el-button type="primary" @click="handleSearch">搜索</el-button>
  </el-form-item>
  </el-form>
  <el-table :data="filteredOrders.slice((currentPage - 1) * pageSize, currentPage * pageSize)" border  style="width: 100%">
  <el-table-column prop="id" label="订单编号"></el-table-column>
  <el-table-column prop="customer" label="客户名称"></el-table-column>
  <el-table-column prop="amount" label="订单金额"></el-table-column>
  <el-table-column prop="status" label="订单状态">
  <template v-slot="{ row }">
  <el-tag :type="row.status === '已完成' ? 'success' : 'danger'" :disable-transitions="true">
  {{ row.status }}
  </el-tag>
  </template>
  </el-table-column>
  </el-table>
  <div class="pagination-wrapper">
  <el-pagination
  :total="total"
  :current-page="currentPage"
  :page-size="pageSize"
  layout="prev, pager, next"
  @current-change="handleCurrentChange"
  class="pagination"
  >
  <template #prev>
  <i class="el-icon-arrow-left"></i> 上一页
  </template>
  <template #next>
  下一页 <i class="el-icon-arrow-right"></i>
  </template>
  </el-pagination>
  </div>
  </div>
  </template>
  
  <script>
  import { reactive, ref } from 'vue'
  import { ElTable, ElTableColumn, ElTag, ElPagination, ElForm, ElFormItem, ElInput, ElButton } from 'element-plus'
  
  export default {
  name: 'OrderPage',
  components: {
  ElTable,
  ElTableColumn,
  ElTag,
  ElPagination,
  ElForm,
  ElFormItem,
  ElInput,
  ElButton,
  },
  setup() {
    const orders = reactive([
{ id: '001', customer: '张三', amount: 1000, status: '已完成' },
{ id: '002', customer: '李四', amount: 2000, status: '已取消' },
{ id: '003', customer: '王五', amount: 1500, status: '处理中' },
{ id: '004', customer: '赵六', amount: 800, status: '已完成' },
{ id: '005', customer: '钱七', amount: 3000, status: '处理中' },
{ id: '006', customer: '孙八', amount: 1200, status: '已完成' },
{ id: '007', customer: '周九', amount: 500, status: '已取消' },
{ id: '008', customer: '吴十', amount: 10000, status: '处理中' },
{ id: '009', customer: '郑十一', amount: 2500, status: '已完成' },
{ id: '010', customer: '王十二', amount: 1800, status: '处理中' },
{ id: '011', customer: '李十三', amount: 900, status: '已完成' },
{ id: '012', customer: '张十四', amount: 6000, status: '已取消' },
{ id: '013', customer: '赵十五', amount: 3500, status: '处理中' },
{ id: '014', customer: '钱十六', amount: 1200, status: '已完成' },
{ id: '015', customer: '孙十七', amount: 800, status: '已取消' },
{ id: '016', customer: '周十八', amount: 4000, status: '处理中' },
{ id: '017', customer: '吴十九', amount: 1500, status: '已完成' },
{ id: '018', customer: '郑二十', amount: 2000, status: '处理中' },
{ id: '019', customer: '王二十一', amount: 800, status: '已完成' },
{ id: '020', customer: '李二十二', amount: 5000, status: '已取消' },
{ id: '021', customer: '张二十三', amount: 3000, status: '处理中' },
{ id: '022', customer: '赵二十四', amount: 1200, status: '已完成' },
{ id: '023', customer: '钱二十五', amount: 700, status: '已取消' },
{ id: '024', customer: '孙二十六', amount: 9000, status: '处理中' },
{ id: '025', customer: '周二十七', amount: 2500, status: '已完成' },
{ id: '026', customer: '吴二十八', amount: 1800, status: '处理中' },
{ id: '027', customer: '郑二十九', amount: 1000, status: '已完成' },
{ id: '028', customer: '王三十', amount: 4000, status: '已取消' },
{ id: '029', customer: '李三十一', amount: 3500, status: '处理中' },
{ id: '030', customer: '张三十二', amount: 1500, status: '已完成' },
{ id: '031', customer: '赵三十三', amount: 6000, status: '已取消' },
{ id: '032', customer: '钱三十四', amount: 1200, status: '处理中' },
{ id: '033', customer: '孙三十五', amount: 800, status: '已完成' },
{ id: '034', customer: '周三十六', amount: 2000, status: '已取消' },
{ id: '035', customer: '吴三十七', amount: 3000, status: '处理中' },
{ id: '036', customer: '郑三十八', amount: 1000, status: '已完成' },
{ id: '037', customer: '王三十九', amount: 1800, status: '处理中' },
{ id: '038', customer: '李四十', amount: 500, status: '已完成' },
{ id: '039', customer: '张四十一', amount: 2500, status: '已取消' },
{ id: '040', customer: '赵四十二', amount: 1200, status: '处理中' },
{ id: '041', customer: '钱四十三', amount: 700, status: '已完成' },
{ id: '042', customer: '孙四十四', amount: 3000, status: '已取消' },
{ id: '043', customer: '周四十五', amount: 1500, status: '处理中' },
{ id: '044', customer: '吴四十六', amount: 800, status: '已完成' },
{ id: '045', customer: '郑四十七', amount: 2000, status: '处理中' },
{ id: '046', customer: '王四十八', amount: 1000, status: '已完成' },
{ id: '047', customer: '李四十九', amount: 4000, status: '已取消' },
{ id: '048', customer: '张五十', amount: 3500, status: '处理中' },
{ id: '049', customer: '赵五十一', amount: 1500, status: '已完成' },
{ id: '050', customer: '钱五十二', amount: 9000, status: '已取消' },
{ id: '051', customer: '孙五十三', amount: 2500, status: '处理中' },
{ id: '052', customer: '周五十四', amount: 1200, status: '已完成' },
{ id: '053', customer: '吴五十五', amount: 700, status: '已取消' },
{ id: '054', customer: '郑五十六', amount: 3500, status: '处理中' },
{ id: '055', customer: '王五十七', amount: 1800, status: '已完成' },
{ id: '056', customer: '李五十八', amount: 1000, status: '处理中' },
{ id: '057', customer: '张五十九', amount: 4000, status: '已完成' },
{ id: '058', customer: '赵六十', amount: 1200, status: '已取消' },
{ id: '059', customer: '钱六十一', amount: 800, status: '处理中' },
{ id: '060', customer: '孙六十二', amount: 1500, status: '已完成' },
{ id: '061', customer: '周六十三', amount: 2000, status: '已取消' },
{ id: '062', customer: '吴六十四', amount: 2500, status: '处理中' },
{ id: '063', customer: '郑六十五', amount: 900, status: '已完成' },
{ id: '064', customer: '王六十六', amount: 1800, status: '处理中' },
{ id: '065', customer: '李六十七', amount: 500, status: '已完成' },
{ id: '066', customer: '张六十八', amount: 3000, status: '已取消' },
{ id: '067', customer: '赵六十九', amount: 1200, status: '处理中' },
{ id: '068', customer: '钱七十', amount: 700, status: '已完成' },
{ id: '069', customer: '孙七十一', amount: 4000, status: '已取消' },
{ id: '070', customer: '周七十二', amount: 1500, status: '处理中' },
{ id: '071', customer: '吴七十三', amount: 1000, status: '已完成' },
{ id: '072', customer: '郑七十四', amount: 3500, status: '处理中' },
{ id: '073', customer: '王七十五', amount: 1200, status: '已完成' },
{ id: '074', customer: '李七十六', amount: 800, status: '已取消' },
{ id: '075', customer: '张七十七', amount: 2000, status: '处理中' },
{ id: '076', customer: '赵七十八', amount: 900, status: '已完成' },
{ id: '077', customer: '钱七十九', amount: 2500, status: '处理中' },
{ id: '078', customer: '孙八十', amount: 1000, status: '已完成' },
{ id: '079', customer: '周八十一', amount: 4000, status: '已取消' },
{ id: '080', customer: '吴八十二', amount: 3500, status: '处理中' },
{ id: '081', customer: '郑八十三', amount: 1500, status: '已完成' },
{ id: '082', customer: '王八十四', amount: 1200, status: '处理中' },
{ id: '083', customer: '李八十五', amount: 800, status: '已取消' },
{ id: '084', customer: '张八十六', amount: 3000, status: '处理中' },
{ id: '085', customer: '赵八十七', amount: 1000, status: '已完成' },
{ id: '086', customer: '钱八十八', amount: 500, status: '处理中' },
{ id: '087', customer: '孙八十九', amount: 2500, status: '已完成' },
{ id: '088', customer: '周九十', amount: 1800, status: '已取消' },
{ id: '089', customer: '吴九十一', amount: 1200, status: '处理中' },
{ id: '090', customer: '郑九十二', amount: 700, status: '已完成' },
{ id: '091', customer: '王九十三', amount: 4000, status: '已取消' },
{ id: '092', customer: '李九十四', amount: 1500, status: '处理中' },
{ id: '093', customer: '张九十五', amount: 1000, status: '已完成' },
{ id: '094', customer: '赵九十六', amount: 3500, status: '处理中' },
{ id: '095', customer: '钱九十七', amount: 1200, status: '已完成' },
{ id: '096', customer: '孙九十八', amount: 800, status: '已取消' },
{ id: '097', customer: '周九十九', amount: 2500, status: '处理中' },
{ id: '098', customer: '吴一百', amount: 2000, status: '已完成' },
{ id: '099', customer: '郑一百零一', amount: 1500, status: '已取消' },
{ id: '100', customer: '王一百零二', amount: 3000, status: '处理中' },
])

  const total = orders.length
  const currentPage = ref(1)
  const pageSize = 12
  const searchText = ref('')
  const filteredOrders = ref(orders)
  
  function handleCurrentChange(val) {
    currentPage.value = val
  }
  
  function handleSearch() {
    if (!searchText.value) {
      filteredOrders.value = orders
      return
    }
    const keyword = searchText.value.trim()
    filteredOrders.value = orders.filter(order => {
      return order.id.includes(keyword) || order.customer.includes(keyword)
    })
  }
  
  return {
    orders,
    total,
    currentPage,
    pageSize,
    searchText,
    filteredOrders,
    handleCurrentChange,
    handleSearch,
  }
  },
  }
  </script>
  
  <style scoped>
.order-page {
padding: 20px;
}
.search-form {
margin-bottom: 20px;
}
.pagination-wrapper {
display: flex;
justify-content: center;
}
.pagination {
margin: 0 auto;
}
  </style>